{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/goods/detail.css?v={$static_version}" rel="stylesheet">
<style>
/* 侧边栏样式 */
.sidebar-container {
    position: sticky;
    top: 20px;
}
/* 移动端标签导航优化 */
@media (max-width: 768px) {
    .tab-nav-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    .tab-nav-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .tab-nav-wrapper {
        display: flex;
        min-width: max-content;
    }
    .tab-button {
        white-space: nowrap;
    }
    .tab-button i {
        margin-right: 0.25rem;
    }
}
</style>
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    {include file="default/goods/detail/components/breadcrumb" /}

    <!-- 商品主要信息区域 -->
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 mb-8">
        <!-- 商品图片和信息 -->
        <div class="lg:w-3/4 order-1 lg:order-1">
                <div class="bg-white rounded-sm p-6 shadow-lg bg-gradient-to-b from-white to-gray-50">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
                    <!-- 商品图片 -->
                    <div class="lg:col-span-1">
                        {include file="default/goods/detail/components/gallery" /}
                    </div>
                    <!-- 商品信息 -->
                    <div class="lg:col-span-2">
                        {include file="default/goods/detail/components/info" /}
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品规格 -->
        <div class="lg:w-1/4 order-2 lg:order-2">
            {include file="default/goods/detail/components/spec" /}
        </div>
    </div>

    <!-- 商品详情内容 - 左右布局 -->
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧：侧边栏 -->
        <div class="lg:w-1/4 order-2 lg:order-1">
            <div class="sidebar-container">
                <!-- 侧边栏内容 -->
                <div class="bg-white rounded-sm shadow-lg mb-6">
                    <div class="px-6 py-3 bg-gradient-to-b from-white to-gray-50 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-800">商品目录</h3>
                    </div>
                    <div class="p-4">
                        <div class="space-y-2">
                            <a href="#content-section" class="block p-2 rounded hover:bg-gray-100 text-gray-800 font-medium">
                                <i class="fas fa-file-alt mr-2"></i> 商品简介
                            </a>
                            {if in_array($goods.paid_content_type, ['multi_chapter', 'chapter_groups', 'multi_file'])}
                            <a href="#chapters-section" class="block p-2 rounded hover:bg-gray-100 text-gray-800 font-medium">
                                <i class="fas fa-list mr-2"></i> 章节目录
                            </a>
                            {/if}
                            <a href="#reviews-section" class="block p-2 rounded hover:bg-gray-100 text-gray-800 font-medium">
                                <i class="fas fa-comments mr-2"></i> 用户评价
                            </a>
                            <a href="#help-section" class="block p-2 rounded hover:bg-gray-100 text-gray-800 font-medium">
                                <i class="fas fa-question-circle mr-2"></i> 帮助中心
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 侧边栏广告位 -->
                {cms:hooks name="content.sidebar" /}

                <!-- 相关商品推荐 -->
                {if $related_goods && count($related_goods) > 0}
                <div class="bg-white rounded-sm shadow-lg overflow-hidden">
                    <div class="px-6 py-3" style="background: linear-gradient(#fff, #fafafa); border-bottom: 1px solid #e5e5e5;">
                        <h3 class="text-lg font-semibold text-gray-800">相关推荐</h3>
                    </div>
                    <div class="p-4">
                        <div class="space-y-4">
                            {volist name="related_goods" id="item" key="index"}
                            {if $index <= 5}
                            <div class=" rounded-sm overflow-hidden  transition-shadow">
                                <a href="{$item.url}" class="block">
                                    <div class="flex gap-3 p-3">
                                        <div class="flex-shrink-0">
                                            <img data-src="{$item.image}"
                                                alt="{$item.name}"
                                                class="w-20 h-10 object-cover rounded lazy-image">
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h4 class="font-medium text-gray-800 text-sm mb-2 line-clamp-2">{$item.name}</h4>
                                            <div class="flex items-center justify-between">
                                                {if !empty($item.price)}
                                                    <span class="text-blue-500 price-container text-sm font-bold">
                                                        <span class="currency-symbol">{:conf('site_currency_symbol')}</span>
                                                        <span class="price-number">{$item.price}</span>
                                                    </span>
                                                {else}
                                                    <span class="text-green-500 font-bold text-sm">免费</span>
                                                {/if}
                                                <span class="text-xs text-gray-500">
                                                    <i class="fas fa-eye mr-1"></i><span class="view-count" data-count="{$item.views|default=0}">{$item.views|default=0}</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
                {/if}
            </div>
        </div>

        <!-- 右侧：商品详情内容 -->
        <div class="flex-1 lg:w-3/4 order-1 lg:order-2">
            <div class="bg-white rounded-sm">
                <!-- 内容区域 -->
                <div id="content-section" class="tab-content">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-4">商品详情</h2>
                        <div class="rich-text">
                            {$goods.content|raw}
                        </div>
                    </div>
                </div>

                <!-- 章节目录 -->
                <div id="chapters-section" class="tab-content">
                    {include file="default/goods/detail/components/chapters" /}
                </div>

                <!-- 评价内容 -->
                <div id="reviews-section" class="tab-content">
                    {include file="default/goods/detail/components/comments" /}
                </div>

                <!-- 帮助中心 -->
                <div id="help-section" class="tab-content">
                    {include file="default/goods/detail/components/help" /}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/goods/detail.js?v={$static_version}"></script>

<!-- 页面数据 -->
<script>
// 商品数据
window.goodsData = JSON.parse('{$goods|raw|json_encode}');
</script>

{if $user_id}
<script>
// 用户数据
window.userInfo = {
    id: {$user_id},
    username: '{$user_info.username|default=""}',
    nickname: '{$user_info.nickname|default=""}',
    avatar: '{$user_info.avatar|default=""}'
};
</script>
{else}
<script>
window.userInfo = null;
</script>
{/if}

<!-- 页面初始化 -->
<script>
$(document).ready(function() {
    // 初始化商品详情页
    if (window.GoodsDetail) {
        GoodsDetail.init(window.goodsData);
    }

    // 侧边栏滚动效果
    $('.sidebar-container a').on('click', function(e) {
        e.preventDefault();
        const target = $($(this).attr('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 20
            }, 500);
        }
    });


    // 默认显示所有内容
    $('.tab-content').show();

    // 添加showTab函数以兼容评论系统
    window.showTab = function(tabName) {
        // 在sidebar布局中，所有内容都是可见的，不需要切换
        // 但需要滚动到对应区域
        const sectionMap = {
            'description': '#description-section',
            'chapters': '#chapters-section',
            'reviews': '#reviews-section',
            'help': '#help-section'
        };

        const target = $(sectionMap[tabName]);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 20
            }, 500);
        }

        // 如果是评论tab，触发评论加载
        if (tabName === 'reviews' && window.commentsManager) {
            setTimeout(() => {
                window.commentsManager.loadCommentsOnTabActive();
            }, 100);
        }
    };

    // 立即初始化评论系统（因为评论区域在sidebar布局中是可见的）
    setTimeout(() => {
        if (window.commentsManager) {
            window.commentsManager.loadCommentsOnTabActive();
        }
    }, 500);
});
</script>
{/block} 